<template>
  <div class="account-balance">
    <top>
      <div class="title">
        <div class="text">
          <span>可提盒数: </span>
          <span class="num">{{counter}} 盒</span>
        </div>
        <div class="extract">
          <cube-button inline light @click="$router.push('/account/extract')">提 货</cube-button>
        </div>
      </div>
    </top>
    <div class="menu">
      <div class="menu-item" :class="{'active': currentIndex === 0}" @click="clickItem(0)">
        <span class="text">进仓记录</span>
      </div>
      <div class="menu-item" :class="{'active': currentIndex === 1}" @click="clickItem(1)">
        <span class="text">出货记录</span>
      </div>
      <div class="menu-item" :class="{'active': currentIndex === 2}" @click="clickItem(2)">
        <span class="text">提货记录</span>
      </div>
      <div class="menu-item" :class="{'active': currentIndex === 3}" @click="clickItem(3)">
        <span class="text">充值记录</span>
      </div>
    </div>
    <template>
      <ul class="commission">
        <li
          class="item"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="award">{{ item.text }}</div>
          <div class="desc">
            <p class="fans" v-if="item.order_id > 0">
              <span class="text">订单ID:</span>
              <span class="color">{{ item.order_id }}</span>
            </p>
            <p class="fans" v-if="+item.change >= 0">
              <span class="text">增加:</span>
              <span class="color">+{{ item.change }}</span>
            </p>
            <p class="fans" v-else>
              <span class="text">减少:</span>
              <span class="color">{{ item.change }}</span>
            </p>
            <p class="score">
              <span class="text">剩下:</span>
              <span class="color">{{ item.result }}</span>
            </p>
            <p class="time">
              <span class="text">时间:</span>
              <span class="color">{{ item.create_time }}</span>
            </p>
          </div>
        </li>
      </ul>
      <pull-up
        :loading="loading"
        :busy="query.busy"
        @loadMore="loadMore" />
      <loading :show="loading" />
    </template>
  </div>
</template>

<script>
import Top from '../components/Top'
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import PullUp from '@/components/PullUp'
export default {
  name: 'StoreList',
  components: {
    Top,
    Loading,
    PullUp
  },
  filters: {
  },
  data() {
    return {
      loading: false,
      currentIndex: 0,
      list: [],
      counter: 0,
      query: {
        page: 0,
        pageSize: 10,
        busy: false,
      },
    }
  },
  methods: {
    getCounter() {
      api.Store.getCount().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.counter = data.model.num
      })
    },
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.query.busy === false) {
        this.query.page++
        this.loading = true
        this.query.busy = true
        api.Store.list({
          ...this.query,
          type: this.currentIndex + 1
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.query.busy = true
          } else {
            this.query.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    clickItem(index) {
      this.currentIndex = index
      this.list = []
      this.query = {
        page: 0,
        pageSize: 10,
        busy: false,
      }
      this.getList()
    }
  },
  created () {
    const type = +this.$route.query.type || 0
    // console.log(type)
    this.currentIndex = type
    this.getCounter()
    this.getList()
  },
  deactivated () {
    this.query.busy = true
  }
}
</script>

<style scoped lang="stylus">
.account-balance
  .commission
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      .award
        width 100px
        height 100px
        line-height 100px
        color red
        font-weight 700
        font-size 16px
        letter-spacing 1px
      .desc
        flex 1
        text-align left
        display flex
        flex-direction column
        justify-content center
        p
          height 20px
          span
            margin 0 5px
          &.score
            color red
            font-size 14px
            font-weight 700
.title
  display flex
  justify-content space-between
  align-items center
  .text
    color white
    font-size 16px

.menu
  display flex
  justify-content center
  align-items center
  background white
  height 45px
  .menu-item
    padding 0 10px
    &.active
      font-size 14px
      font-weight bold
      color $main_color
</style>
